<template>
  <div class="grid-content bg-purple-dark">
    <div class="info-wrapper">
      <ul class="cards">
        <li class="card">

          <div class="fbet">
            <div class="card_icon card_icon_bg8">
              <img src="../../assets/logo/logo1111.png" alt="">
            </div>
            <div>
              <span class="card_number">货区10</span>
              <span class="card_title" data-v-78ca3db0="">货区名称</span>
            </div>
          </div>
        </li>
        <li class="card">

          <div class="fbet">
            <div class="card_icon card_icon_bg1">
              <img src="../../assets/logo/reports-icon1.png" alt="">
            </div>
            <div>
              <span class="card_number">1000</span><span class="card_title" data-v-78ca3db0="">货区总数</span>
            </div>
          </div>
        </li>
        <li class="card">

          <div class="fbet">
            <div class="card_icon card_icon_bg2">
              <img src="../../assets/logo/reports-icon2.png" alt="">
            </div>
            <div>
              <span class="card_number">0</span><span class="card_title" data-v-78ca3db0="">已用货区</span>
            </div>
          </div>
        </li>
        <li class="card">

          <div class="fbet">
            <div class="card_icon card_icon_bg3">
              <img src="../../assets/logo/reports-icon3.png" alt="">
            </div>
            <div>
              <span class="card_number">0</span><span class="card_title" data-v-78ca3db0="">空置货区</span>
            </div>
          </div>
        </li>
        <li class="card">

          <div class="fbet">
            <div class="card_icon card_icon_bg4">
              <img src="../../assets/logo/reports-icon4.png" alt="">
            </div>
            <div>
              <span class="card_number">0</span><span class="card_title" data-v-78ca3db0="">货物种类</span>
            </div>
          </div>
        </li>
        <li class="card">

          <div class="fbet">
            <div class="card_icon card_icon_bg5">
              <img src="../../assets/logo/reports-icon5.png" alt="">
            </div>
            <div>
              <span class="card_number">1</span><span class="card_title" data-v-78ca3db0="">主要货物</span>
            </div>
          </div>
        </li>
        <li class="card">

          <div class="fbet">
            <div class="card_icon card_icon_bg6">
              <img src="../../assets/logo/reports-icon6.png" alt="">
            </div>
            <div>
              <span class="card_number">1</span><span class="card_title" data-v-78ca3db0="">待检货物</span>
            </div>
          </div>
        </li>
        <li class="card">

          <div class="fbet">
            <div class="card_icon card_icon_bg7">
              <img src="../../assets/logo/reports-icon7.png" alt="">
            </div>
            <div>
              <span class="card_number">0</span><span class="card_title" data-v-78ca3db0="">环境温度</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {};
</script>

<style scoped>
  /* 移除所有ul和ol列表的小黑点 */
  ul,
  ol {
    list-style: none;
  }

  .info-wrapper {
    margin: 5px;
  }

  .cards {
    position: relative;
    display: flex;
    padding: 0px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 22px; /* 使用gap替代margin来控制间距 */
  }

  .card {
    position: relative;
    cursor: pointer;
    width: calc(12.5% - 20px); /* 默认每行8个卡片 */
    height: 100px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    padding: 15px;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: transform 0.3s ease;
  }

  .fbet {
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .card_icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 20px;
  }

  .card_icon img {
    width: 30px;
    height: 30px;
    object-fit: cover;
  }

  .card_icon_bg1 {
    background: rgb(233, 235, 255);
  }
  .card_icon_bg2 {
    background: #ffe6e0;
  }
  .card_icon_bg3 {
    background: #e6fbf2;
  }
  .card_icon_bg4 {
    background: #fff4ee;
  }
  .card_icon_bg5 {
    background: #e6fbf2;
  }
  .card_icon_bg6 {
    background: #e9ebff;
  }
  .card_icon_bg7 {
    background: #dbedff;
  }
  .card_icon_bg8 {
    background: #f5f5f5;
  }

  .card_number {
    color: rgb(51, 51, 51);
    display: block;
    font-size: 1.2rem; /* 使用rem单位 */
    font-family: Arial;
    font-weight: bold;
  }

  .card_title {
    text-align: left;
    display: block;
    color: rgb(102, 102, 102);
    font-family: "Microsoft YaHei";
    font-size: 0.9rem; /* 使用rem单位 */
    margin-top: 5px;
  }

  /* 媒体查询：调整布局和字体大小 */
  @media (max-width: 1200px) {
    .card {
      width: calc(33.33% - 15px); /* 每行显示3个卡片 */
    }

    .card_number {
      font-size: 1rem; /* 调整数字字体大小 */
    }

    .card_title {
      font-size: 0.8rem; /* 调整标题字体大小 */
    }
  }

  @media (max-width: 900px) {
    .card {
      width: calc(50% - 15px); /* 每行显示2个卡片 */
    }

    .card_number {
      font-size: 1.2rem; /* 调整数字字体大小 */
    }

    .card_title {
      font-size: 0.9rem; /* 调整标题字体大小 */
    }
  }

  @media (max-width: 600px) {
    .card {
      width: calc(100% - 15px); /* 每行显示1个卡片 */
      height: auto; /* 自动调整卡片高度 */
    }

    .card_number {
      font-size: 1.5rem; /* 调整数字字体大小 */
    }

    .card_title {
      font-size: 1rem; /* 调整标题字体大小 */
    }
  }
</style>
